<template>
	<view class="ReportSub">
		<view class="ReportSubTop">
			<view class="ReportSubTops" :style="{background:  `url(${imageBaseUrl}/baogaobj.png) no-repeat top -8rpx center / 730rpx 243rpx`}">
				<view class="ReportSubTopsText">{{companyInfo.companyName}}</view>
				<view class="ReportSubTopsAn">
					<view class="ReportSubTopsAnBtn" @click="handleViewDetail()">企业信息</view>
				</view>
			</view>
			<view class="ReportSubTopx">
				<view class="ReportSubTopxYuanWai">
					<image class="GaoZhongDi" src="/static/images/gaozhongdi.png"></image>
					<view class="charts-box">
						<qiun-data-charts type="gauge" :opts="opts" :chartData="chartData" :canvas2d="true"
							canvasId="HzUAIEKDBWuIRsgkGzdFypZYsvdYpjZx" />
					</view>
				</view>
				<view></view>
			</view>
		</view>
		<view class="ReportSubTop ReportSubJie">
			<view class="ReportSubJies">
				<image src="/static/images/shuangsanjiao.png"></image>
				<view class="ReportSubJiesText">申报成功率影响因素</view>
			</view>
			<view class="ReportSubTopx ReportSubTopxNew">
				<view class="ReportSubTopxLi" v-for="(item, index) in this.report.matchPolicy.successFactors" :key="index">
					<view class="ReportSubTopxLis">
						{{ item }}
						<!-- <image src="/static/images/xiangshang.png"></image> -->
					</view>
					<view class="ReportSubTopxLix"></view>
				</view>
			</view>
		</view>
		<view class="ReportSubTop ReportSubJie">
			<view class="ReportSubJies">
				<image src="/static/images/shuangsanjiao.png"></image>
				<view class="ReportSubJiesText">指标详解</view>
			</view>
			<view class="ReportSubJiex">
				<view class="ReportSubJiexLi">
					<view class="ReportSubJiexList">
						<view class="ReportSubJiexListLi" v-for="(item, index) in this.report.matchPolicy.policyAnalysis" :key="index">
							{{item}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ReportSubTop ReportSubJie">
			<view class="ReportSubJies">
				<image src="/static/images/shuangsanjiao.png"></image>
				<view class="ReportSubJiesText">申报条件</view>
			</view>
			<view class="ReportSubTopx ReportSubTopxNew">
				<view class="ReportSubTopxLi" v-for="(item, index) in this.report.matchPolicy.condition" :key="index">
					<view class="ReportSubTopxLis">
						{{ item }}
						<!-- <image src="/static/images/xiangshang.png"></image> -->
					</view>
					<view class="ReportSubTopxLix"></view>
				</view>
			</view>
		</view>
		<view class="ReportSubTop ReportSubJie">
			<view class="ReportSubJies">
				<image src="/static/images/shuangsanjiao.png"></image>
				<view class="ReportSubJiesText">所需材料</view>
			</view>
			<view class="ReportSubJiex">
				<view class="ReportSubJiexLi">
					<view class="ReportSubJiexList">
						<view class="ReportSubJiexListLi" v-for="(item, index) in this.report.matchPolicy.material" :key="index">
							{{item}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ReportSubTop ReportSubJie ReportSubBao ReportSubZhang">
			<view class="ReportSubZhangs">
				<image :src="`${imageBaseUrl}/jieimg.png`"></image>
			</view>
			<view class="ReportSubTopx">
				<view class="ReportSubTopxLi" v-for="(item, index) in this.report.matchPolicy.suggestion" :key="index">
					<view class="ReportSubTopxLis">
						{{ item }}
						<!-- <image src="/static/images/xiangshang.png"></image> -->
					</view>
					<view class="ReportSubTopxLix"></view>
				</view>
			</view>
		</view>
		<view class="ReportSubEnd">
			<view class="ReportSubEndBtn" @click="download()">下载匹配报告</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			imageBaseUrl() {
				return this.$IMAGE_BASE_URL;
			}
		},
		props: {
			score: String
		},
		data() {
			return {
				report: {},
				chartData: {},
				companyInfo: {},
				opts: {
					color: ["#f89821", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: "",
						fontSize: 25,
						color: "#666666",
						offsetY: 0
					},
					subtitle: {
						name: "适配等级",
						fontSize: 15,
						color: "#666666",
						offsetY: 0
					},
					extra: {
						gauge: {
							type: "progress",
							width: 20,
							labelColor: "#666666",
							startAngle: 0.75,
							endAngle: 0.25,
							startNumber: 0,
							endNumber: 100,
							labelFormat: "",
							splitLine: {
								fixRadius: -10,
								splitNumber: 10,
								width: 15,
								color: "#FFFFFF",
								childNumber: 5,
								childWidth: 122
							},
							pointer: {
								width: 24,
								color: "auto"
							}
						}
					}
				}
			};
		},
		created() {
			this.opts.title.name = this.score > 80 ? '高' : this.score < 80 && this.score >= 50 ? '中' : '低' 
			this.getServerData();
			this.report = uni.getStorageSync("curReport")
			this.companyInfo = uni.getStorageSync('companyInfo')
			
		},
		methods: {
			handleViewDetail() {
				uni.navigateTo({
					url: `/pages/enterprise/details/index?creditCode=${this.companyInfo.creditCode}`
				})
			},
			download() {
				this.report.reportAttachmentUrl = this.report.reportAttachmentUrl.replace('http://121.37.118.34:9003', 'https://wvuw.oucuiya.com');
				this.downloadPDF(this.report.reportAttachmentUrl);
			},
			downloadPDF(url) {
			  uni.showLoading({
			    title: '下载中...',
			    mask: true
			  });
			  uni.downloadFile({
			    url: url,
			    success: (res) => {
			      if (res.statusCode === 200) {
			        const tempFilePath = res.tempFilePath;
			        uni.hideLoading();
			        uni.openDocument({
			          filePath: tempFilePath,
			          fileType: 'pdf',
			          success: () => {},
			          fail: (err) => {
			            uni.showToast({
			              title: '打开文档失败',
			              icon: 'none'
			            });
			          }
			        });
			      }
			    },
			    fail: (err) => {
			      uni.hideLoading();
			      uni.showToast({
			        title: '下载失败',
			        icon: 'none'
			      });
			    }
			  });
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: [{
							"value": 0.2,
							"color": "#1890ff"
						}, {
							"value": 0.8,
							"color": "#2fc25b"
						}, {
							"value": 1,
							"color": "#f04864"
						}],
						series: [{
							name: "完成率",
							data: this.score / 100 - 0.1
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>

<style lang="scss">
	.ReportSub {
		padding: 21rpx 24rpx 16rpx;
		background: #f7f8ff;

		.ReportSubTop {
			padding: 0 0 20rpx;
			border-radius: 20rpx;
			background: #ffffff;
			margin: 0 0 30rpx;

			.ReportSubTops {
				width: 100%;
				height: 243rpx;
				box-sizing: border-box;
				padding: 39rpx 50rpx 0 44rpx;

				.ReportSubTopsText {
					font-size: 32rpx;
					color: #041328;
				}

				.ReportSubTopsAn {
					padding: 12rpx 0 0;

					.ReportSubTopsAnBtn {
						width: 140rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 24rpx;
						color: #1977ff;
						padding-left: 17rpx;
						box-sizing: border-box;
						background: url("/static/images/yuanjiao.png") no-repeat center / 140rpx 40rpx;
					}
				}
			}

			.ReportSubTopx {
				padding: 0 42rpx;
				&.ReportSubTopxNew{
					padding: 0 20rpx;
				}
				.ReportSubTopxLi {
					.ReportSubTopxLis {
						font-size: 28rpx;
						color: #202020;
						padding-left: 36rpx;
						line-height: 55rpx;
						background: url("/static/images/yuandian.png") no-repeat left center / 9rpx 9rpx;

						image {
							width: 25rpx;
							height: 25rpx;
							margin-left: 12rpx;
						}
					}

					.ReportSubTopxLix {
						font-size: 28rpx;
						color: #4e5262;
						line-height: 45rpx;
						padding-left: 36rpx;
					}
				}
			}
		}

		.ReportSubJie {
			padding: 0 40rpx 20rpx;

			.ReportSubJies {
				display: flex;
				height: 110rpx;
				align-items: center;
				justify-content: flex-start;

				image {
					width: 22rpx;
					height: 21rpx;
				}

				.ReportSubJiesText {
					font-size: 32rpx;
					color: #202020;
					margin-left: 18rpx;
				}
			}

			.ReportSubJiex {
				.ReportSubJiexLi {
					.ReportSubJiexLiText {
						font-size: 28rpx;
						color: #202020;
						padding-left: 43rpx;
						margin: 0 0 29rpx;
						background: url("/static/images/jiebj.png") no-repeat left center / 32rpx 30rpx;
					}

					.ReportSubJiexList {
						.ReportSubJiexListLi {
							padding: 15rpx 22rpx;
							font-size: 28rpx;
							color: #b88645;
							line-height: 45rpx;
							background: #fff7ec;
							margin: 0 0 20rpx;
						}
					}
				}
			}
		}

		.ReportSubBao {
			padding: 0;

			.ReportSubJies {
				padding: 20rpx 0 0;
				height: 50rpx;
			}

			.ReportSubTopx {
				padding-bottom: 20rpx;
			}
		}

		.ReportSubLiao {
			.ReportSubTopx {
				font-size: 28rpx;
				color: #4e5262;
				line-height: 45rpx;
			}
		}

		.ReportSubZhang {
			.ReportSubZhangs {
				image {
					width: 100%;
					height: 113rpx;
				}
			}
		}

		.ReportSubEnd {
			height: 80rpx;
			line-height: 80rpx;
			margin: 0 24rpx;
			border-radius: 20rpx;
			background: #2f59fe;
			text-align: center;

			.ReportSubEndBtn {
				display: block;
				font-size: 32rpx;
				color: #f7f8fc;
				text-align: center;
			}
		}

		.ReportSubTopxYuanWai {
			padding: 30rpx 0 0;
			position: relative;
		}
		.GaoZhongDi {
			position: absolute;
			left: 50%;
			margin-left: -311rpx;
			top: -70rpx;
			width: 649rpx;
			height: 411rpx;
		}


		.ReportSubTopxYuan {
			position: absolute;
			left: 162rpx;
			top: 111rpx;
			width: 300rpx;
			height: 170rpx;
			overflow: hidden;
		}

		.ReportSubTopxYuan::before {
			content: '';
			position: absolute;
			width: 300rpx;
			height: 300rpx;
			background: linear-gradient(45deg, #72cd56, #fbea46, #ffcc35);
			border-radius: 50%;
			top: 0;
			left: 0;
			-webkit-mask: radial-gradient(circle at center,
					transparent 50%,
					black 50%);
			mask: radial-gradient(circle at center,
					transparent 50%,
					black 50%);
		}
	}

	.XiaoJianTou {
		position: absolute;
		left: 364rpx;
		top: 109rpx;
		width: 18rpx;
		height: 23rpx;
	}
</style>

<style scoped>
	.charts-box {
	    width: 100%;
	    height: 343rpx;
	  }
</style>